export default defineComponent({
	name: "OpsProcessBar",
	props: { data: Array<{ title: string; rate: number }>, width: Number },
	setup() {
		// const headers = toRef(props.headers);

		return (props: { data: { title: string; rate: number }[]; width: number }) => (
			<div>
				<div className={"h-full w-full  bg-ops-card-bg-black  rounded-md flex flex-col min-w-[500px]"}>
					{props?.data?.map(e => {
						return (
							<div className={"item m-2"}>
								<div className={"header text-xl p-2"}>{e.title}</div>
								<div className={"process flex items-center mx-2"}>
									<div className={"Graphics flex"}>
										{new Array(props.width).fill(0).map((value, index) => {
											// console.log(value);
											return new Percent(index, e.rate).getVNode(props.width);
										})}
									</div>
									<div className={"rate text-green-600 px-4 text-2xl min-w-20 text-nowrap"}>{e.rate}%</div>
								</div>
							</div>
						);
					})}
				</div>
			</div>
		);
	}
});

class Percent {
	defaultVnodeStyle = {
		"border-radius": "2px",
		width: "10px",
		height: "26.95px",
		"margin-right": "2px"
	};

	activeColor = [
		"radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55))",
		"radial-gradient(rgba(234, 184, 57, 0.95) 10%, rgba(234, 184, 57, 0.55))",
		"radial-gradient(rgba(242, 73, 92, 0.95) 10%, rgba(242, 73, 92, 0.55))"
	];
	defaultColor = ["rgba(115, 191, 105, 0.18)", "rgba(234, 184, 57, 0.18)", "rgba(242, 73, 92, 0.18)"];

	private readonly _rate: number;
	private _index: number;

	constructor(index: number, rate: number) {
		this._index = index;
		this._rate = rate;
	}

	getVNode(width: number) {
		const rateLevel: number = this.getRateLevel(this._rate);
		if (this._rate / (100 / width) >= this._index) {
			this.defaultVnodeStyle["backgroundImage"] = this.activeColor[rateLevel - 1];
		} else {
			this.defaultVnodeStyle["backgroundColor"] = this.defaultColor[rateLevel - 1];
		}
		return <div style={this.defaultVnodeStyle}></div>;
	}

	getRateLevel(rate: number): number {
		if (rate <= 60) {
			return 1;
		}

		if (rate <= 80) {
			return 2;
		}
		if (rate <= 100) {
			return 3;
		}
		return 3;
	}
}
